// 对象的写法
import React, { lazy } from 'react';
import { Navigate } from 'react-router-dom'

import Home from '@/views/Home';

const Login = lazy(() => import('@/views/Login'));
const Register = lazy(() =>import('@/views/Register'));

const Page1 = lazy(() => import('@/views/Page1'));
const Page2 = lazy(() => import('@/views/Page2'));
const Page301 = lazy(() => import('@/views/Page301'));
const Page4 = lazy(() => import('@/views/Page4'));

const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>loading...</div>}>
        {comp}
    </React.Suspense>
)


const routes = [
    {
        path: '/',
        element: <Navigate to='/page1' />
    },
    {
        path: '/',
        element: <Home />,
        children: [
            {
                path: '/page1',
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: '/page2',
                element: withLoadingComponent(<Page2 />)
            },
            {
                path: '/pages3/page301',
                element: withLoadingComponent(<Page301 />)
            },
            {
                path: '/page4',
                element: withLoadingComponent(<Page4 />)
            }
        ]
    },
    {
        path: '/login',
        element: withLoadingComponent(<Login />)
    },
    {
        path: '/register',
        element: withLoadingComponent(<Register />)
    },
    {
        path: '*',
        element: <Navigate to='/page1' />
    }
]

export default routes